<template>
  <div>
    <div class="box" v-for="item in album" :key="item">{{ item }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      album: [],
      index: 0,
      response_data: [],
    };
  },
  created() {},
  mounted() {
    // 加载数据
    this.get_data();
    // 添加滚动监听
    window.addEventListener("scroll", this.rolling);
  },
  methods: {
    // 数据加载
    load_data() {
      for (var i = 0; i < 6; i++) {
        this.index++;
        if (this.index < Object.keys(this.response_data).length) {
          this.album.push(this.response_data[this.index.toString()]);
        }
      }
    },
    get_data() {
      //  模拟向后台发送请求得到数据
      for (var i = 0; i < 50; i++) {
        this.response_data.push(i);
      }
      this.load_data();
    },
    rolling() {
      // 滚动过的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 当前可视区的高度
      var clientHeight = document.documentElement.clientHeight;
      // 滚动条的长度
      var scrollHeight = document.documentElement.scrollHeight;

      // 当滚动过的距离+可视区的高度>=滚动条长度时，就相当于滚动到了底部
      if (scrollTop + clientHeight >= scrollHeight) {
        this.load_data();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  border: 1px solid skyblue;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
}
</style>
